import { Component, OnInit, Input, ElementRef, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { I18nService } from 'src/app/core/i18n/i18n.service';
interface weekday {
	label: string;
	value: string;
	isSelected: boolean;
}
@Component({
	template: `
		<div *ngFor="let item of value; let i = index;">
			<nz-time-picker nzFormat="HH:mm" [(ngModel)]="item.timeStart"></nz-time-picker> -- <nz-time-picker nzFormat="HH:mm" [(ngModel)]="item.timeEnd"></nz-time-picker>
			<nz-select style="width: 150px;margin-left:10px;" [(ngModel)]="item.weekday" [nzAllowClear]="true" (ngModelChange)="changeWeek($event)">
				<nz-option *ngFor="let week of weeks" [nzLabel]="week.label" [nzValue]="week.value" [nzDisabled]="week.isSelected"></nz-option>
			</nz-select>
			<a style="margin-left:10px;" *ngIf="value.length < 7 && value.length == i + 1" (click)="addTime()">{{'cp.add'|translate}}</a>
			<a style="margin-left:10px;" *ngIf="value.length > 1" (click)="removeTime(i)">{{'cz.delete'|translate}}</a>
		</div>
	`,
	selector: 'clain-week-time',
	providers: [
		{
			provide: NG_VALUE_ACCESSOR,
			useExisting: forwardRef(() => ClainWeekTimeComponent),
			multi: true,
		},
	],
})
export class ClainWeekTimeComponent implements OnInit, ControlValueAccessor {
	constructor(private i18n:I18nService,private el: ElementRef) {
		this.i18n.get('week').subscribe(res=>{
			this.weeks = [
				{ label: res.Mon, value: 'monOpenTime', isSelected: true },
				{ label: res.Tue, value: 'tueOpenTime', isSelected: false },
				{ label: res.Wed, value: 'wedOpenTime', isSelected: false },
				{ label: res.Thu, value: 'thuOpenTime', isSelected: false },
				{ label: res.Fri, value: 'friOpenTime', isSelected: false },
				{ label: res.Sat, value: 'satOpenTime', isSelected: false },
				{ label: res.Sun, value: 'sunOpenTime', isSelected: false },
			];
		})
	}
	@Input()
	public weeks: Array<weekday> = [];
	public weekObj: any = {};
	private _value: Array<any> = [{ weekday: 'monOpenTime', timeStart: new Date('1990-01-01 09:00'), timeEnd: new Date('1990-01-01 18:00') }];
	get value(){
		return this._value;
	}
	set value(value){
		this._value = value;
		this.updateSelected();
	}
	propagateChange = (_: any) => {};
	writeValue(value: Array<any>) {
		if (value) {
			this.value = value;
		}
	}
	registerOnChange(fn: any) {
		this.propagateChange = fn;
	}

	registerOnTouched(fn: any) {}

	ngOnInit() {
		this.weeks.forEach(e => {
			this.weekObj[e.value] = e;
		});
	}

	changeWeek(e) {
		this.updateSelected();
	}

	updateSelected() {
		this.weeks.forEach(e => {
			e.isSelected = false;
		});
		this.value.forEach(e => {
			if (e.weekday) {
				this.weekObj[e.weekday].isSelected = true;
			}
		});
	}
	addTime() {
		const obj: any = {};
		for (let i = 0; i < this.weeks.length; i++) {
			if (!this.weeks[i].isSelected) {
				obj.weekday = this.weeks[i].value;
				break;
			}
		}
		obj.timeStart = new Date(this.value[this.value.length - 1].timeStart);
		obj.timeEnd = new Date(this.value[this.value.length - 1].timeEnd);
		this.value.push(obj);
		this.updateSelected();
	}
	removeTime(i) {
		this.value.splice(i, 1);
		this.updateSelected();
	}
}
